<template>
  <div class="toolbar">
      <div class="btn" @click="$emit('bold')">
           <el-tooltip effect="dark" content="加粗" placement="bottom">
                <SvgIcon name="bold"/>
            </el-tooltip>
      </div>

      <div class="btn" @click="$emit('under')">
          <el-tooltip effect="dark" content="删除线" placement="bottom">
            <SvgIcon name="under-line"/>
           </el-tooltip>
      </div>

      <div class="btn" @click="$emit('italic')">
          <el-tooltip effect="dark" content="斜体" placement="bottom">
            <SvgIcon name="Italic"/>
          </el-tooltip>
      </div>
  </div>
</template>

<script>
export default {
    name: 'ToolBar',
    emits: ['bold','under','italic'],
    setup(){

    }
}
</script>

<style lang="scss" scoped>
.toolbar{
    display: flex;
    border-bottom: 1px solid #dddddd;
    .btn{
        
        padding: 6px;
        margin: 5px 1px;
        border-radius: 5px;
        &:hover{
            cursor: pointer;
            background:#f5f5f5;
        }
    }
}

</style>